<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="./lib/vue.js"></script>
        <title>12 vue事件总线</title>
    </head>
    <body>
        <div id="box">
            <wx-author></wx-author>
            <wx-user></wx-user>
        </div>

        <script>
            //bus为事件总线
            const bus = new Vue();

            Vue.component('wxAuthor', {
                template: `<div>
                    微信公众号发布：<input type="text" v-model="mytext" />
                    <button @click="handleClick()">发布</button>
                    </div>`,
                data() {
                    return {
                        mytext: ''
                    };
                },
                methods: {
                    handleClick() {
                        bus.$emit('dingyue', this.mytext);
                    }
                }
            });

            Vue.component('wxUser', {
                template: `<div>
                    微信公众号订阅用户，收到消息：{{ msg }}
                    </div>`,
                data() {
                    return {
                        msg: ''
                    };
                },
                //mounted()是生命周期函数，当组件挂载完成时调用的方法
                mounted() {
                    bus.$on('dingyue', (data) => {
                        this.msg = data;
                    });
                }
            });

            const vm = new Vue({
                el: '#box'
            });
        </script>
    </body>
</html>
